<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>KBX-手机版新增POI</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .addressbox,.addressbox span{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
        <form class="layui-form" id="form">

            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="groupid" lay-filter="groupid" lay-search="" lay-verify="required">
                        <option value="">请选择</option>
                        {volist name='cityList' id='city_value'}
                        <option value="{$city_value['id']}">{$city_value['name']}</option>
                        {/volist}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">POI类型</label>
                <div class="layui-input-inline">
                    <select name="typeid" lay-filter="setType" lay-search="" lay-verify="required">
                        <option value="">请选择</option>
                        {volist name='classify_list' id='class_value'}
                        <option value="{$class_value['classify_id']}">{$class_value['classify_name']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <!--名称-->
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline" style="position: relative">
                    <input name="name" value="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                </div>
            </div>

            <!--英文名-->
            <div class="layui-form-item">
                <label class="layui-form-label">英文名</label>
                <div class="layui-input-inline">
                    <input name="eng_name" id="eng_name" maxlength="255" value="" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    <div class="addressbox"></div>
                </div>
            </div>

            <!--地址-->
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input name="address" id="address" readonly value="" lay-verify="required" class="layui-input" type="text">
                </div>
            </div>

            <input type="hidden" name="lat" value="">
            <input type="hidden" name="lng" value="">
            <input type="hidden" name="place_id" value="">
            <input type="hidden" name="map_thumb_img" value="">

            <div id="map" style="width:100%;margin: 8px auto;background: #eee">

            </div>
            <!--提交-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn" lay-submit lay-filter="form">立即提交</a>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form','upload'], function() {
        var upload = layui.upload,
            layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        //选中地点
        var googleMapData = [];
        //如果详细地址未匹配到信息则使用列表中的数据
        function setAddressByList(res,googleMapData,address)
        {
            if(res.data.candidates.length < 1 || "OK" != res.data.status){
                if(googleMapData.length > 0){
                    $.each(googleMapData,function (i,v) {
                        if(v.formatted_address==address){
                            $.ajaxSettings.async = false;
                            $.post('{:url("/api/common/getGoogleImgByLatLng")}',{
                                lat:v.geometry.location.lat,
                                lng:v.geometry.location.lng,
                                zoom:8
                            },function (img_res) {
                                if(img_res.code>0){
                                    res.data.google_map_img = img_res.data.google_map_img;
                                    res.data.status = 'OK';
                                }
                            },'json')
                            $.ajaxSettings.async = true;
                            res.data.candidates.push(v);return false;
                        }
                    })
                }
            }

            return res;
        }
        function setAddress(address) {
            //切换成接口访问
            $.post('{:url("/api/common/getGoogleAddressList")}',{address:address,getMap:true},function (res) {
                if(res.code>0){
                    var res = setAddressByList(res,googleMapData,address);
                    var candidates = res.data.candidates;
                    if(candidates.length>0 && "OK" == res.data.status){
                        $("input[name=lat]").val(candidates[0].geometry.location.lat);
                        $("input[name=lng]").val(candidates[0].geometry.location.lng);
                        $("input[name=place_id]").val(candidates[0].place_id);
                        $("input[name=eng_name]").val(candidates[0].name);
                        $("input[name=address]").val(address);
                        $("input[name=map_thumb_img]").val(res.data.google_map_img);
                        $("#map").html('');
                        $("#map").append('<img width="100%" src="'+res.data.google_map_img+'">');
                    }
                }
            },'json')
        }
        //获取地址列表
        function getAddressList(address) {
            var addressbox="";
            if(address=='' || address==undefined){
                return false;
            }
            //切换成接口访问
            $.post('{:url("/api/common/getGoogleAddressList")}',{address:address},function (res) {
                if(res.code>0){
                    var candidates = res.data.candidates;
                    if(candidates.length > 0 && "OK" == res.data.status){
                        $.each(candidates,function (i,v) {
                            if(i>4){
                                return false;
                            }
                            addressbox+="<span>"+v.formatted_address+"</span>";
                        })
                        console.log(addressbox);
                        $(".addressbox").html(addressbox);
                    }
                }
            },'json')
        }
        var timeoutId = 0;
        //英文输入绑定事件
        $("#eng_name").on("input",function(){
            hiddenAddressBox();
            clearTimeout(timeoutId);
            var value = $(this).val();
            timeoutId = setTimeout(function(){
                getAddressList(value);
            },1000)
        });
        //点击地址设置地址
        $("#form .addressbox").on("click","span",function(){
            var address = $(this).html();
            setAddress(address);
        });
        //取消地址列表框
        $("body").on("click",function(){
            hiddenAddressBox()
        })
        //清掉地址列表
        function hiddenAddressBox()
        {
            $(".addressbox").html("");
        }

        //表单提交
        form.on('submit(form)', function(data) {
            var add_load_index = layer.load(2,{shade: [0.5, '#393D49']});
            $.ajax({
                url:"{:url('admin/poi/updsimplepoi')}",
                data:$('#form').serialize(),
                type:'post',
                async: false,
                success:function(res) {
                    console.log('start result');
                    layer.close(add_load_index);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            layer.confirm('是否需要继续添加吗?',{
                                btn:['是','否']
                            },function(index) {
                                window.location.href='{:url("admin/poi/addsimplepoi")}';
                            },function (index) {
                                window.location.href='{:url("admin/index/index")}';
                            })
                        },1500)
                    }
                }
            });
            return false;
        });
    });
</script>
</html>